<template>
  <div>
    <div class="hot-nav">
      <ul>
        <li>推荐</li>
        <li>排行榜</li>
        <li>歌单</li>
        <li>主播电台</li>
        <li>歌手</li>
        <li>新碟上架</li>
      </ul>
    </div>
    <div class="hot-banner">
      <div class="banner">
        <button @click="next()" class="ban-l">&lt;</button>
        <button @click="last()" class="ban-r">&gt;</button>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [],
      index: 0,
    };
  },
  created() {

    // 获取banner
    this.getAxios("/banner?type=0").then((data) => {
      // console.log(data);

      for (let i = 0; i < data.banners.length; i++) {
        this.imgs[i] = data.banners[i].imageUrl;
      }
      // console.log(this.imgs);
      $(".hot-banner").css("background", `url(${this.imgs[this.index]})`);
      $(".hot-banner").css("background-size", "100% 100%");
    });

  },
  mounted(){

    this.implement();
  },
  methods: {
    next() {
      this.index++;
      if (this.index < this.imgs.length) {
        $(".hot-banner").css("background", `url(${this.imgs[this.index]}) `);
        $(".hot-banner").css("background-size", "100% 100%");
      } else {
        this.index = 0;
        $(".hot-banner").css("background", `url(${this.imgs[this.index]})`);
        $(".hot-banner").css("background-size", "100% 100%");
      }
    },
    last() {
      this.index--;
      if (this.index >= 0) {
        $(".hot-banner").css("background", `url(${this.imgs[this.index]}) `);
        $(".hot-banner").css("background-size", "100% 100%");
      } else {
        this.index = this.imgs.length - 1;
        $(".hot-banner").css("background", `url(${this.imgs[this.index]}) `);
        $(".hot-banner").css("background-size", "100% 100%");
      }
    },
    implement(){
      setInterval(() => {
      this.index++;
      if (this.index < this.imgs.length) {
        $(".hot-banner").css("background", `url(${this.imgs[this.index]}) `);
        $(".hot-banner").css("background-size", "100% 100%");
      } else {
        this.index = 0;
        $(".hot-banner").css("background", `url(${this.imgs[this.index]})`);
        $(".hot-banner").css("background-size", "100% 100%");
      }
    }, 3000);
    }
  },
};
</script>

<style lang="less" scoped>
.hot-nav {
  width: 1450px;
  background: palegoldenrod;
  height: 40px;
  margin: 0 auto;
  color: #666;
  & > ul {
    text-align: center;
    & > li {
      list-style: none;
      font-size: medium;
      width: 100px;
      line-height: 40px;
      text-align: center;
      cursor: default;
      display: inline-block;
      &:hover {
        background-color: papayawhip;
        color: gray;
      }
    }
  }
}
.hot-banner {
  width: 1450px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  & > .banner{
    position: relative;
    & > .ban-l{
      position: absolute;
      top: 160px;
      width: 50px;
      height: 100px;
      font-size: xx-large;
      border: 0px;
      color: white;
      background:none;
      overflow: hidden;
      &:hover{
        background-color: #666;
        opacity: 0.6;
      }
    }
    & >.ban-r{
      position: absolute;
      top: 160px;
      left: 1400px;
      width: 50px;
      height: 100px;
      font-size: xx-large;
      border: 0px;
      color: white;
      background:none;
      overflow: hidden;
      &:hover{
        background-color: #666;
        opacity: 0.6;
      }
    }
  }
}
</style>
